<template>
  <van-field
    v-model="model"
    is-link
    :readonly="readonly"
    :disabled="disabled"
    :name="name"
    :label="label"
    :placeholder="placeholder"
    :rules="rules"
    :leftIcon="leftIcon"
    :rightIcon="rightIcon"
    @click="isShow = true"
  />
  <van-popup v-model:show="isShow" position="bottom">
    <van-picker
      :columns="columns"
      @confirm="confirmAction"
      @cancel="isShow = false"
    />
  </van-popup>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    value: String,
    label: String,
    placeholder: String,
    name: String,
    disabled: Boolean,
    readonly: Boolean,
    leftIcon: String,
    rightIcon: String,
    rules: Array<unknown>,
    columns: {
      type: Array<{text: String, value: string | number}>,
      default: () => ([])
    },
  },
  setup(props,{ emit }) {
    const isShow = ref(false);
    const model = ref(props.value || '');
   


    const confirmAction = ({ selectedOptions }) => {
      model.value = selectedOptions[0]?.text;
      emit('update:value', model.value);
      isShow.value = false;
    };


    return {
      isShow,
      model,
      confirmAction
    }

  }
});
</script>

<style lang="scss" scoped></style>
